<template>
    <div class="productProNew">
        <div class="title"><h1><span>日程安排</span></h1></div>
        <form name="schedule" class="schedule" action="">
            <ul>
                <li v-for="(item,index) in scheduleDays">
                    <h1 class="hide">第{{item.day}}天(必填)</h1>
                    <div class="form-group fews">
                        <label :for="'fewDays'+$attrs.text+index">第{{item.day}}天：</label>
                        <input autocomplete="off" type="text" class="form-control few" :id="'fewDays'+$attrs.text+index" v-model='item.title'>
                    </div>

                    <h1 class="hide">行程内容(必填)</h1>
                    <div class="form-group">
                        <label class="destxt" :for="'travelContent'+$attrs.text+index">行程内容：</label>
                        <textarea class="form-control proDes" :id="'travelContent'+$attrs.text+index" rows="6" placeholder="请输入内容" v-model='item.content'></textarea>
                    </div>

                    <h1 class="hide">早餐</h1>
                    <div class="form-group Meals">
                        <label :for="'breakfast'+$attrs.text+index">早餐：</label>
                        <div class="form-control dropdown">
                            <input autocomplete="off" type="text" class="form-control" :id="'breakfast'+$attrs.text+index"  @focus="focus($event)" @blur="blur($event)"  v-model='item.breakfast'>
                            <ul class="address-ul">
                                <li @click="breakfast($event,'含',item)" >含</li>
                                <li @click="breakfast($event,'自理',item)" >自理</li>
                            </ul>
                        </div>
                    </div>

                    <h1 class="hide">午餐</h1>
                    <div class="form-group Meals">
                        <label :for="'lunch'+$attrs.text+index">午餐：</label>
                        <div class="form-control dropdown">
                            <input autocomplete="off" type="text" class="form-control" :id="'lunch'+$attrs.text+index" @focus="focus($event)" @blur="blur($event)" v-model='item.lunch'>
                            <ul class="address-ul">
                                <li @click="lunch($event,'含',item)" >含</li>
                                <li @click="lunch($event,'自理',item)" >自理</li>
                            </ul>
                        </div>
                    </div>

                    <h1 class="hide">晚餐</h1>
                    <div class="form-group Meals">
                        <label :for="'dinner'+$attrs.text+index">晚餐：</label>
                        <div class="form-control dropdown">
                            <input autocomplete="off" type="text" class="form-control" @focus="focus($event)" @blur="blur($event)" :id="'dinner'+$attrs.text+index" v-model='item.supper'>
                            <ul class="address-ul">
                                <li @click="supper($event,'含',item)" >含</li>
                                <li @click="supper($event,'自理',item)" >自理</li>
                            </ul>
                        </div>
                    </div>

                    <h1 class="hide">交通</h1>
                    <div class="form-group Meals">
                        <label :for="'traffic'+$attrs.text+index">交通：</label>
                        <div class="form-control dropdown">
                            <input autocomplete="off" type="text" class="form-control" @focus="focus($event)" @blur="blur($event)" :id="'traffic'+$attrs.text+index" v-model='item.transport'>
                            <ul class="address-ul">
                                <li @click="transport($event,'大巴',item)" >大巴</li>
                                <li @click="transport($event,'大巴+飞机',item)" >大巴+飞机</li>
                                <li @click="transport($event,'飞机+大巴',item)" >飞机+大巴</li>
                            </ul>
                        </div>
                    </div>

                    <h1 class="hide">住宿</h1>
                    <div class="form-group Meals">
                        <label :for="'stayroom'+$attrs.text+index">住宿：</label>
                        <input autocomplete="off" type="text" class="form-control" :id="'stayroom'+$attrs.text+index" v-model='item.hotel'>
                    </div>
                    <h1 class="borderBottom"></h1>
                </li>

            </ul>
            <button type="button" class="btn btn-info confirmBtn" @click="surePro">确定</button>
        </form>
    </div>
</template>
<script>
    export default {
        data(){
            return{
                Http:'',//行程获取
                routeHttp:'', //行程提交
                scheduleDays:'',//行程参数
                setTime:'',
            }
        },
        computed:{
            ScheduleDayList(){ //行程
                return this.$store.state.interface.xchScheduleDayList;
            },
            setXchScheduleDay(){ //行程提交
                return this.$store.state.interface.setXchScheduleDay;
            }
        },
        methods:{
            surePro(){
                var self = this;
                var succeed=0;
                event.preventDefault();
                for(var i in self.scheduleDays){ // 循环提交每天的行程计划
                    var formData =new FormData(); // 基础信息表单数据
                        formData.append('title', self.scheduleDays[i].title);
                        formData.append('content', self.scheduleDays[i].content);
                        formData.append('breakfast', self.scheduleDays[i].breakfast);
                        formData.append('lunch', self.scheduleDays[i].lunch);
                        formData.append('supper', self.scheduleDays[i].supper);
                        formData.append('transport', self.scheduleDays[i].transport);
                        formData.append('hotel', self.scheduleDays[i].hotel);
                        formData.append('id', self.scheduleDays[i].id);
                    this.$ajax.post(this.routeHttp,formData).then(function(res) {
                        if(res.data.code == '10000'){
                            layer.msg('提交成功');
                        }else{
                            self.codes(res.data.code);
                            layer.msg('提交失败');
                        }
                    },function(res) {
                        layer.msg('服务器错误！');
                    });
                }
            },
            //早餐
            breakfast(event,value,data){
                // $(event.target).parents('.address-ul').hide().prev('.form-control').attr('value',value);
                $(event.target).parents('.address-ul').hide()
                data.breakfast = value;
            },
            //午餐
            lunch(event,value,data){
                $(event.target).parents('.address-ul').hide()
                data.lunch = value;
            },
            //晚餐
            supper(event,value,data){
                $(event.target).parents('.address-ul').hide()
                data.supper = value;
            },
            //交通
            transport(event,value,data){
                $(event.target).parents('.address-ul').hide()
                data.transport = value;
            },
            focus(event){
                clearTimeout(this.setTime);
                $(event.target).next('.address-ul').show();
            },
            blur(event){
                this.setTime=setTimeout(function(){
                    $(event.target).next('.address-ul').hide();
                },500)
            },
        },
        beforeMount(){
            var self = this;
            var url = this.ScheduleDayList;
            var sessionId = JSON.parse(sessionStorage.getItem('customer')).sid;
            this.Http = url+'?sid='+sessionId; // 基础信息
            this.routeHttp = this.setXchScheduleDay +'?sid='+sessionId; // 行程
            // 行程获取
            self.$ajax.post(self.Http+'&xid='+self.$attrs.proid).then(function(res) {
                if(res.data.code == '10000' ){
                    var ShowList = res.data.result;
                    for(var i in ShowList){
                        self.scheduleDays = ShowList[i];
                    };
                }else{
                    self.codes(res.data.code);
                    layer.msg('加载失败!');
                }
            },function(res) {
                layer.msg('服务器错误！');
            });
        },
        mounted(){

        }
    }
</script>
<style lang="scss" scoped>
    form{
        display:block;
        .borderBottom {
            border-bottom: 2px dashed #ccc;
            margin-top: 1rem;
            margin-bottom: 0.5rem;
        }
        li:last-of-type .borderBottom{
            display:none;
        }
      .proDes{width: 526px;}
    }
    .title{
        color:#4e5e7e;
    }
    .dropdown{
        position: relative;
        padding: 0;
        background: #fff url('../../assets/images/date.png') no-repeat scroll right center;
        display: inline-block;
        box-sizing: border-box;
        input{
            width: 100%;
            height: 100%;
            padding: 6px 12px;
            color: rgb(127, 136, 156);
            background: none;
            padding-right: 30px;
            font-size:12px;
            position: relative;
        }
        .address-ul{
            display: none;
            position: absolute;
            left: 0;
            width: 100%;
            z-index: 100;
            max-height: 300px;
            overflow: auto;
            background-color: #fff;
            border: 1px solid #0091e4;
            li{
                font-size:12px;
                line-height: 18px;
                padding: 0 10px;
                &:hover{
                    background-color:#0091e4;
                    color:#fff;
                }
            }
        }
    }
</style>
